import { processValue } from '@/utils';
import { useIntl } from '@umijs/max';
import { message, Tag } from 'antd';
import _ from 'lodash';
import React, { useEffect, useRef, useState } from 'react';

interface viewTagInter extends API.DataColumnDTO {
  uniqueId?: string;
}

type IProps = {
  tagList: string[];
  submitCloseTags?: (data: viewTagInter[]) => void;
};

const SelectedTags: React.FC<IProps> = (props) => {
  const intl = useIntl();
  const { tagList, submitCloseTags } = props;
  const [isFold, setIsFold] = useState(false);
  const [viewTags, setViewTags] = useState<viewTagInter[]>([]);
  const tagsRef = useRef(null);
  const initialTagHeight = useRef<number>(0);
  const [showToggle, setShowToggle] = useState(false);
  // 第一次改变后的高度
  const [firstOverHeight, setFirstOverHeight] = useState(0);
  // 获得原始高度
  useEffect(() => {
    initialTagHeight.current = JSON.parse(JSON.stringify(tagsRef?.current?.offsetHeight));
  }, []);
  useEffect(() => {
    if (tagList?.length && tagList?.length > 0) {
      const tempList = JSON.parse(JSON.stringify(viewTags));
      if (tempList.length > 20) {
        message.warning(intl.formatMessage({ id: 'hisCurve.warm20' }));
      } else {
        const getList = tagList.map((item: string) => {
          return JSON.parse(item);
        });
        if (_.uniqBy(tempList.concat(getList), 'uniqueId').length > 20) {
          message.warning(intl.formatMessage({ id: 'hisCurve.warm20' }));
        } else {
          setViewTags(_.uniqBy(tempList.concat(getList), 'uniqueId'));
        }
      }
    } else {
      setViewTags([]);
    }
  }, [tagList]);
  useEffect(() => {
    if (tagsRef?.current?.offsetHeight > initialTagHeight?.current && firstOverHeight === 0) {
      setFirstOverHeight(tagsRef?.current?.offsetHeight);
      setShowToggle(true);
    } else {
    }
  }, [tagsRef?.current?.offsetHeight, viewTags]);
  const handleCloseTags = (uniqueId: string) => {
    const arr = _.cloneDeep(viewTags);
    setViewTags(arr.filter((item) => item.uniqueId !== uniqueId));
  };
  useEffect(() => {
    submitCloseTags(viewTags);
  }, [viewTags]);
  return (
    <>
      <div
        style={{ width: '100%', maxHeight: 200, marginTop: 20, display: 'flex', marginBottom: 10 }}
      >
        <div style={{ width: 140 }}>{intl.formatMessage({ id: 'hisCurve.select' })}</div>
        <div
          style={{
            flexWrap: 'wrap',
            overflow: 'hidden',
            maxHeight: isFold ? initialTagHeight?.current : 'none',
            transition: 'max-height 0.3s ease',
          }}
          ref={tagsRef}
        >
          {(viewTags || []).map((item) => {
            return (
              <Tag
                key={item.uniqueId}
                closable={true}
                onClose={() => {
                  handleCloseTags(item.uniqueId, item);
                }}
              >
                {item.deviceName ? processValue(item.deviceName) : processValue(item.areaName)}
                {item.dataName}
              </Tag>
            );
          })}
        </div>
        {showToggle && (
          <div
            style={{ color: '#6babff', cursor: 'pointer', textWrap: 'nowrap' }}
            onClick={() => {
              setIsFold(!isFold);
            }}
          >
            {isFold ? '展开' : '收起'}
          </div>
        )}
      </div>
    </>
  );
};
export default SelectedTags;
